<template>
  <div class="max-w-6xl mx-auto p-6 min-h-screen bg-gradient-to-br from-slate-50 to-emerald-50">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8 p-8 bg-white rounded-2xl shadow-lg">
      <h2 class="flex items-center justify-center gap-3 text-3xl font-semibold text-gray-800 mb-2">
        <n-icon class="text-4xl text-emerald-500" :component="ClipboardListIcon" />
        预备党员考察表编辑
      </h2>
      <p class="text-gray-600">请完善预备党员考察表信息</p>
    </div>

    <!-- 提示信息模块 -->
    <div class="mb-6 bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-200 rounded-2xl p-6 shadow-sm">
      <div class="flex items-center gap-3 mb-4">
        <n-icon class="text-2xl text-emerald-600" :component="InfoIcon" />
        <h3 class="text-lg font-semibold text-emerald-800">重要提示信息</h3>
      </div>
      <div class="space-y-2">
        <div v-for="(tip, index) in tipMessages" :key="index" class="flex items-start gap-3 text-sm text-emerald-700">
          <div class="flex-shrink-0 w-1.5 h-1.5 bg-emerald-500 rounded-full mt-2"></div>
          <span>{{ tip }}</span>
        </div>
      </div>
    </div>

    <n-form ref="formRef" :model="formValue" label-placement="top" label-align="left" label-width="auto">
      
      <!-- 预备党员考察表卡片 -->
      <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" title="" :bordered="false">
        <template #header>
          <div class="flex items-center gap-3 py-2">
            <n-icon class="text-xl text-emerald-500" :component="ClipboardListIcon" />
            <span class="text-lg font-semibold text-gray-800">预备党员考察意见</span>
          </div>
        </template>

        <div class="mb-3">
          <!-- 半年考察意见 -->
          <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
            <div class="flex justify-between items-center mb-3">
              <span class="flex items-center justify-center w-6 h-6 bg-blue-500 text-white rounded-full text-xs font-semibold">1</span>
              <span class="text-sm font-medium text-blue-700">半年考察意见</span>
            </div>
            
            <n-grid :cols="12" :x-gap="12" :y-gap="6">
              <n-gi :span="6">
                <n-form-item label="介绍人1姓名" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-input 
                    v-model:value="formValue.probationaryAssessment.assessmentOpinions[0].sponsor1Name" 
                    placeholder="请输入介绍人1姓名"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="介绍人2姓名" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-input 
                    v-model:value="formValue.probationaryAssessment.assessmentOpinions[0].sponsor2Name" 
                    placeholder="请输入介绍人2姓名"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="介绍人意见日期" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-date-picker 
                    v-model:formatted-value="formValue.probationaryAssessment.assessmentOpinions[0].sponsorOpinionDate" 
                    value-format="yyyy-MM-dd" 
                    type="date" 
                    placeholder="选择意见日期"
                    style="width: 100%"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="党支部书记姓名" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-input 
                    v-model:value="formValue.probationaryAssessment.assessmentOpinions[0].branchSecretaryName" 
                    placeholder="请输入党支部书记姓名"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="党支部意见落款时间" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-date-picker 
                    v-model:formatted-value="formValue.probationaryAssessment.assessmentOpinions[0].branchOpinionDate" 
                    value-format="yyyy-MM-dd" 
                    type="date" 
                    placeholder="选择落款时间"
                    style="width: 100%"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>
          </div>

          <!-- 一年考察意见 -->
          <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-3 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
            <div class="flex justify-between items-center mb-3">
              <span class="flex items-center justify-center w-6 h-6 bg-green-500 text-white rounded-full text-xs font-semibold">2</span>
              <span class="text-sm font-medium text-green-700">一年考察意见</span>
            </div>
            
            <n-grid :cols="12" :x-gap="12" :y-gap="6">
              <n-gi :span="6">
                <n-form-item label="介绍人1姓名" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-input 
                    v-model:value="formValue.probationaryAssessment.assessmentOpinions[1].sponsor1Name" 
                    placeholder="请输入介绍人1姓名"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="介绍人2姓名" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-input 
                    v-model:value="formValue.probationaryAssessment.assessmentOpinions[1].sponsor2Name" 
                    placeholder="请输入介绍人2姓名"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="介绍人意见日期" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-date-picker 
                    v-model:formatted-value="formValue.probationaryAssessment.assessmentOpinions[1].sponsorOpinionDate" 
                    value-format="yyyy-MM-dd" 
                    type="date" 
                    placeholder="选择意见日期"
                    style="width: 100%"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="党支部书记姓名" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-input 
                    v-model:value="formValue.probationaryAssessment.assessmentOpinions[1].branchSecretaryName" 
                    placeholder="请输入党支部书记姓名"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="6">
                <n-form-item label="党支部意见落款时间" label-placement="top" :label-style="{ fontSize: '13px' }">
                  <n-date-picker 
                    v-model:formatted-value="formValue.probationaryAssessment.assessmentOpinions[1].branchOpinionDate" 
                    value-format="yyyy-MM-dd" 
                    type="date" 
                    placeholder="选择落款时间"
                    style="width: 100%"
                    class="rounded-lg"
                    size="small"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>
          </div>
        </div>

        <div class="mt-6 p-4 bg-slate-50 rounded-xl border border-slate-200">
          <div class="flex items-center gap-2 text-slate-600 mb-2">
            <n-icon :component="InformationCircleOutlineIcon" />
            <span class="text-sm font-medium">说明</span>
          </div>
          <p class="text-sm text-slate-500">
            预备党员考察表包含半年和一年两次考察意见，每次考察都需要介绍人和党支部书记填写意见并注明日期。
          </p>
        </div>
      </n-card>

    </n-form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import {
  NForm, NFormItem, NGrid, NGi, NInput,
  NDatePicker, NCard, NIcon
} from 'naive-ui'
import {
  ClipboardOutline as ClipboardListIcon,
  InformationCircle as InfoIcon,
  InformationCircleOutline as InformationCircleOutlineIcon
} from '@vicons/ionicons5'

const props = defineProps({
  member: {
    type: Object,
    required: true
  }
})

const formRef = ref(null)

// 初始化数据
const initializeData = (memberData) => {
  // 确保probationaryAssessment对象存在
  if (!memberData.probationaryAssessment) {
    memberData.probationaryAssessment = {
      assessmentOpinions: [
        // 半年考察意见
        {
          sponsor1Name: '',
          sponsor2Name: '',
          sponsorOpinionDate: null,
          branchSecretaryName: '',
          branchOpinionDate: null
        },
        // 一年考察意见
        {
          sponsor1Name: '',
          sponsor2Name: '',
          sponsorOpinionDate: null,
          branchSecretaryName: '',
          branchOpinionDate: null
        }
      ]
    }
  }
  
  // 确保assessmentOpinions数组有两个元素
  if (!memberData.probationaryAssessment.assessmentOpinions ||
      memberData.probationaryAssessment.assessmentOpinions.length !== 2) {
    memberData.probationaryAssessment.assessmentOpinions = [
      {
        sponsor1Name: '',
        sponsor2Name: '',
        sponsorOpinionDate: null,
        branchSecretaryName: '',
        branchOpinionDate: null
      },
      {
        sponsor1Name: '',
        sponsor2Name: '',
        sponsorOpinionDate: null,
        branchSecretaryName: '',
        branchOpinionDate: null
      }
    ]
  }
  
  return memberData
}

const formValue = ref(initializeData({...props.member}))

// 提示信息配置
const tipMessages = ref([
  '预备党员考察表包含半年和一年两次考察意见',
  '每次考察都需要两位介绍人和党支部书记填写意见',
  '所有日期格式均为YYYY-MM-DD',
  '半年考察应在预备期过半时进行，一年考察应在预备期满时进行',
  '确保考察意见真实反映预备党员的表现和进步情况'
])

onMounted(() => {
  // 可以在这里添加额外的初始化逻辑
})

watch(() => props.member, (newVal) => {
  formValue.value = initializeData({...newVal})
})

// 获取编辑后的数据，用于保存到后端
const getEditedData = () => {
  // 直接返回probationaryAssessment对象
  return formValue.value.probationaryAssessment;
}

defineExpose({
  getEditedData,
  getFormData: () => formValue.value
})
</script>